<!--
 * @description: 
 * @Date: 2023-04-28 16:03:20
 * @example: 
 * @params: 
-->
<template></template>
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three-gltf-loader';
// ...导入相关库
export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      loader: null,
      modelPath: '../../public/files/iron-man.glb', // 替换为您的 glb 模型路径
    };
  },
  mounted() {
    this.initScene();
    this.loadModel();
    this.renderScene();
  },
  methods: {
    initScene() {
      // 创建场景、相机和 WebGLRenderer
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);

      // 设置相机位置
      this.camera.position.z = 5;
    },
    loadModel() {
      this.loader = new GLTFLoader();

      // 加载 glb 格式模型
      this.loader.load(
        this.modelPath,
        (gltf) => {
          // 添加模型到场景中
          this.scene.add(gltf.scene);
        },
        undefined,
        (error) => {
          console.error('An error occurred while loading the GLB model:', error);
        }
      );
    },
    renderScene() {
      requestAnimationFrame(this.renderScene);
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>